<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>

          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link>>
            佣金规则设置
          </div>
          
          <div class="hei10"></div>


				<div class="title">佣金规则设置</div>
				<div class="con" v-loading="loading">
            <h3>首次佣金</h3>
            <div class="newcon">
                <div class="newflex">
                    <div class="newflexli1" style="padding: 15px 0;">满足条件</div>
                    <div class="newflexli2" style="padding: 15px 0;">支出佣金</div>
                </div>
                <div class="newflex">
                    <div class="newflexli1 newflex2">
                        <div class="newflexli11"><el-checkbox v-model="active">已激活</el-checkbox></div>
                        <div class="newflexli12">  </div>
                    </div>
                    <div class="newflexli2"><el-input v-model="first_rules.active_commission" @input="inputchoose"  placeholder="请输入金额"></el-input></div>
                </div>
                <div class="newflex">
                    <div class="newflexli1 newflex2">
                        <div class="newflexli11"><el-checkbox v-model="first_recharge">已首充</el-checkbox></div>
                        <div class="newflexli12">
                            <div>充值≥：<el-input v-model="first_rules.first_recharge_one" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                            <div>充值≥：<el-input v-model="first_rules.first_recharge_two" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                        </div>
                    </div>
                    <div class="newflexli2">
                        <div><el-input v-model="first_rules.first_recharge_one_commission" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                        <div><el-input v-model="first_rules.first_recharge_two_commission" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                    </div>
                </div>
                <div class="newflex">
                    <div class="newflexli1 newflex2">
                        <div class="newflexli11"><el-checkbox v-model="recharge_amount">累计充值金额</el-checkbox></div>
                        <div class="newflexli12">
                            <div>充值≥：<el-input v-model="first_rules.recharge_amount_one" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                            <div>充值≥：<el-input v-model="first_rules.recharge_amount_two" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                        </div>
                    </div>
                    <div class="newflexli2">
                        <div><el-input v-model="first_rules.recharge_amount_one_commission" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                        <div><el-input v-model="first_rules.recharge_amount_two_commission" @input="inputchoose" placeholder="请输入金额"></el-input></div>
                    </div>
                </div>

            </div>
            <div class="newalt">
              当前设定规则：
              <span v-if="active == true">已激活，发放佣金{{first_rules.active_commission}}元.</span>
              <span v-if="first_recharge == true">首充大于{{first_rules.first_recharge_one}}元，发放佣金{{first_rules.first_recharge_one_commission}}元或者</span>
              <span v-if="first_recharge == true">首充大于{{first_rules.first_recharge_two}}元，发放佣金{{first_rules.first_recharge_two_commission}}元.</span>
              <span v-if="recharge_amount == true">累计充值大于{{first_rules.recharge_amount_one}}元，发放佣金{{first_rules.recharge_amount_one_commission}}元且</span>
              <span v-if="recharge_amount == true">累计充值大于{{first_rules.recharge_amount_two}}元，发放佣金{{first_rules.recharge_amount_two_commission}}元.</span>
            </div>

            <h3>后续佣金</h3>

            <div class="flex">
                <div class="f1">后续佣金条件:</div>
                <div class="f2">
                  <el-checkbox v-model="no_owe">在网</el-checkbox>
                  <el-checkbox v-model="actived">不欠费</el-checkbox>
                </div>
            </div>
            <div class="flex">
                <div class="f1">发放起始时间:</div>
                <div class="f2">
                    <el-select v-model="start_time" placeholder="请选择月份">
                        <el-option label="激活次月" value="0"></el-option>
                        <el-option label="激活次次月" value="1"></el-option>
                    </el-select>
                </div>
            </div>

            <div class="flex">
                <div class="f1">发放次数:</div>
                <div class="f2">
                    <div class="fanlilist">
                    	<div class="fanlili" v-for="item in fanlilist" :key="item.yue">
                    		<div><el-checkbox v-model="item.is_rebate"></el-checkbox></div>
                    		<div class="yuefen">第{{item.commission_month}}个月</div>
                    		<div><el-input v-model="item.commission_amount" placeholder="请输入金额"></el-input></div>
                    	</div>

                    </div>
                    <div class="fanliadd"><el-button type="text" @click="addfanli">+添加次数+</el-button></div>
                </div>
            </div>
            <div class="flex">
                <div class="f1">收入备注:</div>
                <div class="f3 f5"><el-input v-model="beizhu" placeholder="请输入备注条件"></el-input></div>
            </div>
            <!-- <div class="flex">
                <div class="f1">起始佣金条件:</div>
                <div  class="f2"><el-checkbox v-model="radio1">激活</el-checkbox></div>
            </div>
            <div class="flex">
                <div class="f1">&nbsp;</div>
                <div class="f2"><el-checkbox v-model="radio2">首充充值金额</el-checkbox></div>
                <div class="f3"><el-input v-model="shouchong" @input="shouchonginput" placeholder="请输入首充充值金额"></el-input></div>
            </div>
            <div class="flex">
                <div class="f1">&nbsp;</div>
                <div class="f2"><el-checkbox v-model="radio3">累计充值金额</el-checkbox></div>
                <div class="f3"><el-input v-model="leiji" @input="leijiinput" placeholder="请输入累计充值金额"></el-input></div>
            </div>
            <div class="flex">
                <div class="f1">后续佣金条件:</div>
                <div class="f2"><el-checkbox v-model="radio4">不欠费</el-checkbox></div>
            </div> -->
            <!-- <div class="flex">
                <div class="f1">备注条件:</div>
                <div class="f3 f5"><el-input v-model="beizhu" placeholder="请输入备注条件"></el-input></div>
            </div> -->
            <el-button type="primary" @click="savefanli">保存</el-button>
				</div>
        <!-- <div class="title">佣金结算周期</div>
        <div class="con">
        	<div class="fanlilist">
        		<div class="fanlili" v-for="item in fanlilist" :key="item.yue">
        			<div><el-checkbox v-model="item.is_rebate"></el-checkbox></div>
        			<div class="yuefen">第{{item.commission_month}}个月</div>
        			<div><el-input v-model="item.commission_amount" placeholder="请输入金额"></el-input></div>
        		</div>

        	</div>
        	<div class="fanliadd"><el-button type="text" @click="addfanli">+添加次数+</el-button></div>

          <el-button type="primary" @click="savefanli">保存</el-button>
        </div> -->
			</div>
		</div>
		<foot></foot>

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'moneyset',
		data(){
			return{
				msg:"",
				id:"",
        fftime:'0',
				loading:true,
				search:"",
				log:false,
				money:"",
				total:0,
				pagesize:20,
				page:1,
				list:"",
        shop_id:"",

        active:false,
        first_recharge:false,
        recharge_amount:false,
        first_rules:{
          active_commission:0,
          first_recharge_one:0,
          first_recharge_one_commission:0,
          first_recharge_two:0,
          first_recharge_two_commission:0,
          recharge_amount_one:0,
          recharge_amount_one_commission:0,
          recharge_amount_two:0,
          recharge_amount_two_commission:0
        },


        dialog:false,
        radio1: false,
        radio2: false,
        radio3: false,
        radio4: false,
        shouchong:"",
        leiji:"",
        beizhu:"",

        listk:"",
        month:"",
        fanlilist:[],
        start_time:"0",
        actived:false,
        no_owe:false
			}
		},
		created() {
      var that = this

			this.getlist();

			//获取自己的id
			var user = JSON.parse(localStorage.getItem('USER'));
			this.id = user.id
      axios.get('/api/gth/user/shop')
          .then(response => {
              if(response.data.msg.code == 0){
                  this.shop_id = response.data.data.shop_id
              }else{
                  if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                  that.$message.error(response.data.msg.info);
              }
          })

      //先获取一下商品返利

      var that = this
      axios.get('/api/plan-market/commission/config?product_id='+this.$route.query.id)
      	.then(response => {
      		if(response.data.msg.code == 0){
            if(response.data.data.first_rules != null){
                that.first_rules = response.data.data.first_rules
                that.inputchoose()
            }


            if(response.data.data.product_id == null){

            }else{


              that.actived = response.data.data.actived
              if(that.actived == 1){that.actived = true}else{that.actived = false}
              that.no_owe = response.data.data.no_owe
              if(that.no_owe == 1){that.no_owe = true}else{that.no_owe = false}
              that.beizhu = response.data.data.remarks
              that.start_time = response.data.data.start_time.toString()
              that.fanlilist = response.data.data.rules
              for( var i in that.fanlilist){
              	if(that.fanlilist[i].commission_amount != ''){
              		that.fanlilist[i]['is_rebate'] = true
                  console.log(typeof(that.fanlilist[i].commission_amount))
                  that.fanlilist[i].commission_amount = Math.round(that.fanlilist[i].commission_amount * 100) / 100
              	}

              }
            }

      		}else{
      			that.$message.error(response.data.msg.info);
      		}
      	})
		},
		methods:{
      inputchoose:function(){
        if(this.first_rules.active_commission != 0 && this.first_rules.active_commission != ''){this.active = true}else{this.active = false}

        if(this.first_rules.first_recharge_one != 0 && this.first_rules.first_recharge_one != ''){this.first_recharge = true}
        if(this.first_rules.first_recharge_one_commission != 0 && this.first_rules.first_recharge_one_commission != ''){this.first_recharge = true}
        if(this.first_rules.first_recharge_two != 0 && this.first_rules.first_recharge_two != ''){this.first_recharge = true}
        if(this.first_rules.first_recharge_two_commission != 0 && this.first_rules.first_recharge_two_commission != ''){this.first_recharge = true}
        if( this.first_rules.first_recharge_one == '' && this.first_rules.first_recharge_one_commission == '' && this.first_rules.first_recharge_two == '' && this.first_rules.first_recharge_two_commission == ''){this.first_recharge = false}

        if(this.first_rules.recharge_amount_one != 0 && this.first_rules.recharge_amount_one != ''){this.recharge_amount = true}
        if(this.first_rules.recharge_amount_one_commission != 0 && this.first_rules.recharge_amount_one_commission != ''){this.recharge_amount = true}
        if(this.first_rules.recharge_amount_two != 0 && this.first_rules.recharge_amount_two != ''){this.recharge_amount = true}
        if(this.first_rules.recharge_amount_two_commission != 0 && this.first_rules.recharge_amount_two_commission != ''){this.recharge_amount = true}
      },

      savefanli:function(){
      	var that = this
        var datas = {}
        datas['product_id'] = this.$route.query.id
        datas['first_rules'] = this.first_rules

        if(this.actived == true){
          datas['actived'] = 1
        }else{
          datas['actived'] = 0
        }
        if(this.no_owe == true){
          datas['no_owe'] = 1
        }else{
          datas['no_owe'] = 0
        }

        datas['start_time'] = this.start_time
        datas['remarks'] = this.beizhu

        datas['rules'] = this.fanlilist



      	axios.post('/api/plan-market/commission/configs',datas)
      		.then(response => {
      			if(response.data.msg.code == 0){
      				that.$message.success("保存返利成功！");
      				that.fanlilog = false
              that.$router.push({ path: "/productionBasismanag" });
      			}else{
      				that.$message.error(response.data.msg.info);
      			}
      		})
      },
      //添加返利
      addfanli:function(){

      	var li = {is_rebate:false,commission_month:this.fanlilist.length+1,commission_amount:""}
      	this.fanlilist.push(li)

      },


			//获取分销商
			getlist:function(){
        this.search = this.search.trim()
				var that = this;
				axios.get('/api/gth/partner/list?page='+this.page+'&page_size='+this.pagesize)
					.then(response => {
						if(response.data.msg.code == 0){
							that.list = response.data.data.data
							that.total = response.data.data.total
							that.loading = false
						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							that.$message.error(response.data.msg.info);
						}
					})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.index{
    .newcon{ width: 800px; border: 1px #EAEAEA solid;
      .newflex{ display: flex;  justify-content: center; align-items: center; text-align: center; border-bottom: 1px #EAEAEA solid;
          .newflexli1{ flex: 2;
              .newflexli11{  flex: 1;  line-height: 36px; display: flex;  justify-content: center; align-items: center;}
              .newflexli12{  flex: 1; border-left: 1px #EAEAEA solid;
                  /deep/ .el-input{ width: 120px; margin: 5px 0;}
              }
          }
          .newflexli2{ flex: 1; border-left: 1px #EAEAEA solid;
              /deep/ .el-input{ width: 60%; margin: 5px 0;}
           }
          .newflex2{  display: flex; width: 100%; justify-content: center; align-items: center;}
      }

    }
    .newalt{ padding: 20px 0;}
    .listk{
      /deep/ .el-radio{ margin:10px;}
    }

        .con{ margin-top: 20px; padding: 30px;
          .flex{ display: flex; margin-bottom: 10px; line-height: 36px;
            .f1{ flex-basis: 120px;}
            .f2{ margin-right: 10px;}
            .f5{
              /deep/ .el-input__inner{ width: 300px;}
            }
          }

        }
        .fanlilist{ padding: 20px;}
        .fanlili{ display: flex; margin-bottom: 10px; flex-wrap: wrap;

        	/deep/ .el-checkbox{ padding: 5px 10px; line-height: 26px;}
        	.yuefen{  padding: 5px 10px;  line-height: 26px; width: 80px;}
        }
        .guize{ width: 100%; margin-bottom: 20px;}
        .fanliadd{ text-align: left; margin-bottom: 20px;}

        .month{ text-align: right; margin: 20px;}
				.title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272;}
				.add{ display: flex; justify-content: space-between; padding: 20px 30px; text-align: right; position: relative;
					/deep/ .input-with-select{ width: 280px;}
					/deep/ .el-button{  padding: 10px 20px;}
				}
        /deep/ .el-input__icon{line-height: 36px;}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid;
						/deep/ .el-button{
							a{ color: #409EFF;}
							&:hover{
								a{ color: #FFF;}
							}
						}

					}
          .th1{ flex-basis: 50px; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
          .td1{ flex-basis: 50px;  font-size: 14px; border-right:1px #EAEAEA solid;  }

				}
				/deep/ .el-pagination{ text-align: right; margin: 20px 0}
				.my{
					display: flex; justify-content: space-between; padding: 20px; line-height: 20px;
					.myid{
						font-size: 17px; color: #DD2727; padding-left: 10px;
						span{ color: #B1B1B1; font-size: 14px; margin-left: 20px}
					}
					.invitation{
						font-size: 14px; color: #B1B1B1;
						span{ color: #197CFF; cursor: pointer;}
					}
				}


	}
</style>
